<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>note-code</title>
	<style>
		.container {
			width: 300px;
			height: 300px;
			background-color: skyblue;
			/* 默认定义一个三行三列的大小相同的网格布局 */
			display: grid;
			/* grid-template-rows: 1fr 1fr 1fr;
			grid-template-columns: 1fr 1fr 1fr; */

			/* 合并单元格操作（利用命名特性） */
			/* 第一步 */
			/* grid-template-areas:
				"a1 a1 a2"
				"a1 a1 a2"
				"a3 a3 a3"
			; */

			/* 简写 命名后面跟的是行定义，/ 后面跟的是列定义 */
			grid-template:
				"a1 a1 a2" 1fr
				"a1 a1 a2" 1fr
				"a3 a3 a3" 1fr
				/ 1fr 1fr 1fr
			;
		}

		/* 第二步 */
		.container div:nth-child(1) {
			background-color: sienna;
			grid-area: a1;
		}

		.container div:nth-child(2) {
			background-color: seagreen;
			grid-area: a2;
		}

		.container div:nth-child(3) {
			background-color: slateblue;
			grid-area: a3
		}
	</style>
</head>

<body>
	<div class="container">
		<div>1</div>
		<div>2</div>
		<div>3</div>
	</div>
</body>

</html>